<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        title="综合排序"
        v-model="sortval"
        :options="sortList"
        @change="sortChange(sortval)"
      />
      <van-dropdown-item
        title="全部频道"
        v-model="channelVal"
        :options="channelList"
        @change="channelChange(channelVal)"
      />
      <van-dropdown-item title="筛选" ref="item" class="select">
        <div class="list">
          <div class="title">完结状态</div>
          <ul>
            <li
              :class="params.bookStatus == item.value ? 'active' : ''"
              v-for="item in endedlList"
              :key="item.value"
              @click="getendVal(item.value)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
        <div class="list">
          <div class="title">书籍价格</div>
          <ul>
            <li
              :class="params.pay == item.value ? 'active' : ''"
              v-for="item in pricelList"
              :key="item.value"
              @click="getPriceVal(item.value)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
        <div class="list">
          <div class="title">书籍字数</div>
          <ul>
            <li
              :class="params.wordCount == item.value ? 'active' : ''"
              v-for="item in countlList"
              :key="item.value"
              @click="getCountVal(item.value)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="booklist" ref="booklist">
      <Loading v-if="books.list.length == 0" />
      <div class="resultlist" ref="resultlist" v-else>
        <van-empty
          image="search"
          description="找不到内容哦"
          v-if="books.list.length == 0"
        />
        <List2
          ref="child"
          :obj="books"
          @gotoDetail="gotoDetail"
          @loadMore="loadMore"
          v-else
        ></List2>
      </div>
    </div>
  </div>
</template>

<script>
import List2 from "@/components/List2";
export default {
  components: {
    List2,
  },
  props: {
    books: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  data() {
    return {
      sortval: 0,
      channelVal: 0,
      sortList: [
        { text: "综合排序", value: 0 },
        { text: "销量最高", value: 1 },
        { text: "人气最旺", value: 2 },
        { text: "最新上架", value: 3 },
        { text: "最近更新", value: 4 },
      ],
      channelList: [
        { text: "全部频道", value: 0 },
        { text: "男生", value: 1 },
        { text: "女生", value: 2 },
        { text: "出版", value: 3 },
      ],
      //完结状态
      endedlList: [
        { text: "全部", value: 0 },
        { text: "完结", value: 1 },
        { text: "连载", value: 2 },
      ],
      //书本价格
      pricelList: [
        { text: "全部", value: 0 },
        { text: "免费", value: 1 },
        { text: "包月", value: 3 },
        { text: "收费", value: 4 },
      ],
      //书本字数
      countlList: [
        { text: "全部", value: 0 },
        { text: "30万字以下", value: 1 },
        { text: "30-50万字", value: 2 },
        { text: "50-100万字", value: 3 },
        { text: "100万字以上", value: 4 },
      ],
      params: {
        sort: 0,
        channel: 0,
        bookStatus: 0,
        pay: 0,
        wordCount: 0,
        page: 1,
      },
      finished: true,
      // loading: false,
    };
  },
  methods: {
    //前往详情页
    gotoDetail(id) {
      this.$router.push("/detail?sourceUuid=" + id);
    },
    //书本状态改变
    getendVal(val) {
      this.params.bookStatus = val;
      this.params.type = 1;
      this.$emit("bookchange", this.params);
    },
    //价格改变
    getPriceVal(val) {
      this.params.pay = val;
      this.params.type = 1;
      this.$emit("bookchange", this.params);
    },
    //字数发生改变时
    getCountVal(val) {
      this.params.wordCount = val;
      this.$emit("bookchange", this.params);
    },
    //排序发生改变时
    sortChange(val) {
      this.params.sort = val;
      this.params.type = 1;
      this.$emit("bookchange", this.params);
    },
    //频道发生改变时
    channelChange(val) {
      this.params.channel = val;
      this.params.type = 1;
      this.$emit("bookchange", this.params);
    },
    //监听子组件的滚动事件
    scroll() {
      // this.$refs["child"].scroll();
    },
    //监听子组件的触底加载更多
    loadMore() {
      ++this.params.page;
      this.params.type = 2;
      this.$emit("bookchange", this.params);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-empty {
  margin-top: 100px;
}
@mixin bgc() {
  background-color: #fafafa;
}
::v-deep .van-dropdown-menu__bar {
  // width: 100%;
  box-sizing: border-box;
  box-shadow: none;
}
::v-deep .van-popup {
  @include bgc;
}
>>> .van-cell {
  @include bgc;
  // color: #666;
}
>>> .van-dropdown-menu__item .van-dropdown-item__option--active {
  @include bgc;
}

::v-deep .van-dropdown-item__option--active {
  @include bgc;
}
$padding: 14px;
.list {
  margin-left: 40px;
  &:nth-child(1) {
    .title {
      margin-top: $padding;
    }
  }
  .title {
    font-size: $padding;
    text-align: left;
    color: #323233;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    font-size: $padding;
    margin-top: $padding;
    color: #666;
    li {
      padding: 8px 0px;
      background-color: #fff;
      margin-right: $padding;
      margin-bottom: $padding;
      box-sizing: border-box;
    }
    .active {
      color: #fff;
      background-color: #ff0000;
    }
  }
}
.booklist {
  width: 100%;
  height: calc(100vh - 108px);
  overflow-y: auto;
}
.resultlist {
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100vh - 108px);
  box-sizing: border-box;
}
</style>